<template>
      <h1>后台首页</h1>
    <div style="margin-top: 30px">
      <div class="canvars-top">
          <div class="canvars-top-item">
            <h4 style="margin-top: 10px">订单总成交额</h4>
            <span style="display: inline-block;margin-top: 10px">{{data.totalPayMoney}}</span>
          </div>
          <div class="canvars-top-item">
            <h4 style="margin-top: 10px">订单总成交量</h4>
            <span style="display: inline-block;margin-top: 10px">{{data.totalPayNum}}</span>
          </div>
          <div class="canvars-top-item">
            <h4 style="margin-top: 10px">今日订单成交量</h4>
            <span style="display: inline-block;margin-top: 10px">{{data.currentDayNums}}</span>
          </div>
          <div class="canvars-top-item">
            <h4 style="margin-top: 10px">本月订单成交量</h4>
            <span style="display: inline-block;margin-top: 10px">{{data.currentMonthNums}}</span>
          </div>

      </div>
      <div class="canvars" ref="myRef"></div>
    </div>

</template>
<script setup>

import {getCurrentInstance, onMounted, ref} from "vue";
import axios from "@/axios.js"

const { proxy } = getCurrentInstance() // 获取全局配置项
const myRef = ref(null) // 获取dom实例

onMounted(() => {
  getChart()


})

const renderChart = (chartData) => {
  const myChart = proxy.$echarts.init(myRef.value)

  myChart.setOption({
    title: {
      text: '                    近期每天已成交订单量'
    },
    tooltip: {},
    xAxis: {
      data: chartData.titles,

    },
    yAxis: {
      minInterval: 1, // 设置最小间隔为1
    },
    series: [
      {
        name: '成交订单量',
        type: 'bar',
        data: chartData.datas,
        itemStyle: {
          color: function(params) {
            // 根据索引返回不同的颜色
            const colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#8B00FF', '#FF00FF', '#FF1493', '#FF4500'];
            return colors[params.dataIndex];
          }
      }
      }
    ]
  })
}

const data = ref({

})

const getChart  = ()=>{
  axios.get("/order/chart").then(res=>{
      const chartData = res.data;
      data.value = res.data;
      renderChart(chartData); //渲染图表
  })
}



</script>
<style scoped>

.canvars-top{
  width: 350px;
  height: 230px;

  margin-left: 150px;
}
.canvars-top-item{
  width: 140px;
  height: 80px;
  border: 1px solid #F9F9F9;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1),
  -1px -1px 2px rgba(0, 0, 0, 0.1),
  1px -1px 2px rgba(0, 0, 0, 0.1),
  -1px 1px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}

.canvars {
  width: 800px;
  height: 300px;
  margin-top: 30px;
  margin-left: 100px;
}
</style>